<template>
  <div class="fee-Board">

    <div class="board-item" style="display: flex;width: unset;align-content:center;">
      <a-icon type="dashboard" theme="twoTone" :style="{ fontSize: '52px',marginTop:'5px' }" />
      <div class="item-total">
        <div class="item-total-num">10000.00 <span>￥</span></div>
        <div class="item-desc">儿童社保费用  <a-badge status="processing"  style="margin-left: 10px"/> </div>
      </div>
    </div>

    <div class="board-item">
      <a-badge  status="success" text="已交" />  <div class="act-num">3</div>
    </div  >

    <div  class="board-item">
      <a-badge status="error" text="未交"/>  <div class="act-num">3</div>
    </div  >

    <div  class="board-item">
      <a-badge status="default" text="例外" />  <div class="act-num">3</div>
    </div>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class Board extends Vue {
}
</script>
<style lang="less">
.fee-Board{
  display: flex;
  justify-content: space-around;
  align-items: center;
  .board-item{
    color:#595959;
    width:20%;
    text-align: center;
    align-items: center;
    .item-total {
      text-align: left;
      padding-left: 15px;
      .item-total-num{
        font-size: 30px;
        span{
          font-size: 20px;
        }
      }
      .item-desc{
        padding-left: 5px;
        font-size: 12px;
        color: #8c8c8c;
      }
    }
    .act-num{
      padding-left: 15px;
      display: inline-block;
      font-size: 28px;

    }
  }
  .ant-badge-status-dot{
    width: 10px;
    height: 10px;
  }
  .ant-badge-status-text{
    font-size: 16px;
  }
}
</style>
